<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>仪表添加</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <script type="text/javascript" src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>
    <script type="text/javascript" src="/static/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
    <script src="/static/js/flow-meter.js" charset="utf-8"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
            <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
            <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            {% csrf_token %}
            {% if user.role == 'admin' %}
                <div class="layui-form-item" id="manufacturer_input">
                    <label for="L_username" class="layui-form-label">
                        <span class="x-red">*</span>供气商
                    </label>
                    <div class="layui-input-inline" style="width: 400px">
                        <select name="manufacturer_id" lay-verify="required" lay-search="" id="manufacturer"
                                lay-filter="manufacturer" required>
                            <option value="">未选择</option>
                        </select>
                    </div>
                </div>
            {% endif %}

            <div class="layui-form-item">
                <label for="L_username" class="layui-form-label">
                    <span class="x-red">*</span>DTU编号
                </label>
                <div class="layui-input-inline">
                    <select name="dtu_id" lay-search="" id="dtu" lay-verify="dtu" required>
                        <option value="">未选择</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="L_username" class="layui-form-label">
                    <span class="x-red">*</span>仪表地址
                </label>
                <div class="layui-input-inline">
                    <input type="number" id="address" name="address"
                           autocomplete="off" class="layui-input" lay-verify="address" required>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="L_username" class="layui-form-label">
                    <span class="x-red">*</span>气量限值
                </label>
                <div class="layui-input-inline">
                    <input type="number" id="surplus_gas_limits" name="surplus_gas_limits"
                           autocomplete="off" class="layui-input" lay-verify="surplus_gas_limits">
                </div>
            </div>

            <div class="layui-form-item" id="valve_type_div">
                <label for="L_username" class="layui-form-label">
                    <span class="x-red">*</span>阀门类型
                </label>
                <div class="layui-input-inline">
                    <select lay-filter="valve_type">
                        <option value="inline">流量计内嵌阀门</option>
                        <option value="share">共享通信链路阀门</option>
                        <option value="independent">独立通信链路阀门</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item" id="valve_dtu_div" style="display: none">
                <label for="L_username" class="layui-form-label">
                    <span class="x-red">*</span>阀门DTU
                </label>
                <div class="layui-input-inline">
                    <select name="valve_dtu_id" lay-search="" id="valve_dtu" lay-verify="valve_dtu">
                        <option value="">未选择</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item" id="address_div" style="display: none">
                <label for="L_username" class="layui-form-label">
                    <span class="x-red">*</span>阀门地址
                </label>
                <div class="layui-input-inline">
                    <input type="number" id="valve_address" name="valve_address"
                           autocomplete="off" class="layui-input" lay-verify="address">
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label for="desc" class="layui-form-label">
                    备注
                </label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" id="desc" name="remark" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label"></label>
                <button class="layui-btn" lay-filter="add" lay-submit="">添加</button>
            </div>
        </form>
    </div>
</div>
<script>
    layui.use(['form', 'layer', 'jquery'],
        function () {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;

            //自定义验证规则
            form.verify({
                dtu: function (value) {
                    let valve_type = $("#valve_type_div").find('.layui-this').attr('lay-value');
                    if (valve_type !== 'independent') {
                        return;
                    }
                    if (value.length === 0) {
                        return "阀门DTU不能为空！"
                    }
                },
                address: function (value) {
                    let valve_type = $("#valve_type_div").find('.layui-this').attr('lay-value');
                    if (valve_type !== 'share') {
                        return;
                    }
                    if (value.length === 0) {
                        return "阀门地址不能为空！"
                    }
                },
                surplus_gas_limits: function (value) {
                    if (value === '') {
                        return "气量限值不能为空！"
                    }
                }
            });

            form.on('select(manufacturer)', function () {

                get({
                    "param": JSON.stringify({'manufacturer_id': $("#manufacturer_input").find('.layui-this').attr('lay-value')}),
                    "action": "query_dtu"
                }, '/handler/dtu/', function (res) {
                    if (!res.success) {
                        layer.msg(res.msg, {icon: 5, time: 1000});
                    } else {

                        $("#dtu").children().remove();
                        $("#dtu").append('<option value="">未选择</option>');

                        for (let i = 0; i < res.data.length; i++) {
                            $("#dtu").append('<option value="' + res.data[i].id + '">' + res.data[i]['dtu_no'] + '(' + res.data[i]['remark'] + ')' + '</option>');
                        }
                        form.render();
                    }
                });
            });

            {% if user.role != 'admin' %}
                get({
                    "param": JSON.stringify({}),
                    "action": "query_dtu_of_select_box"
                }, '/handler/dtu/', function (res) {
                    if (!res.success) {
                        layer.msg(res.msg, {icon: 5, time: 1000});
                    } else {

                        $("#dtu").children().remove();
                        $("#dtu").append('<option value="">未选择</option>');

                        for (let i = 0; i < res.data.length; i++) {
                            $("#dtu").append('<option value="' + res.data[i].id + '">' + res.data[i]['dtu_no'] + '(' + res.data[i]['remark'] + ')' + '</option>');
                        }
                        form.render();
                    }
                });
            {% endif %}

            form.on('select(valve_type)', function () {

                let valve_type = $("#valve_type_div").find('.layui-this').attr('lay-value');
                if (valve_type === "share") {
                    $("#address_div").show();
                    $("#valve_dtu_div").hide();
                }
                if (valve_type === "independent") {
                    $("#address_div").show();
                    $("#valve_dtu_div").show();
                }
                if (valve_type === "inline") {
                    $("#address_div").hide();
                    $("#valve_dtu_div").hide();
                }

            });

            //监听提交
            form.on('submit(add)',
                function (res) {

                    let obj = res.field;
                    delete obj['manufacturer_id'];
                    if (obj['valve_address'] === "") {
                        delete obj['valve_address']
                    }
                    if (obj['valve_dtu_id'] === "") {
                        delete obj['valve_dtu_id']
                    }
                    post({
                        "param": JSON.stringify(obj),
                        "action": "add_meter"
                    }, '/handler/meter/', function (data) {
                        if (data.success) {
                            layer.alert("添加成功", {
                                    icon: 6
                                },
                                function () {
                                    //关闭当前frame
                                    xadmin.close();
                                    // 可以对父窗口进行刷新
                                    xadmin.father_reload();
                                });
                        } else {
                            layer.msg(data.msg, {icon: 5, time: 3000});
                        }
                    });
                    return false;
                });

            {% if user.role == 'admin' %}
                get({
                    "param": JSON.stringify({}),
                    "action": "query_manufacturer"
                }, '/handler/manufacturer/', function (res) {
                    if (!res.success) {
                        layer.msg(res.msg, {icon: 5, time: 1000});
                    } else {
                        for (let i = 0; i < res.data.length; i++) {
                            $("#manufacturer").append('<option value="' + res.data[i].id + '">'
                                + res.data[i].name + '(' + res.data[i].phone + ')' + '</option>');
                        }
                        form.render('select');
                    }
                });
            {% endif %}

            get({
                "param": JSON.stringify({}),
                "action": "query_dtu_of_select_box"
            }, '/handler/dtu/', function (res) {
                if (!res.success) {
                    layer.msg(res.msg, {icon: 5, time: 1000});
                } else {

                    for (let i = 0; i < res.data.length; i++) {
                        $("#valve_dtu").append('<option value="' + res.data[i].id + '">'
                            + res.data[i]['dtu_no'] + '(' + res.data[i]['remark'] + ')' + '</option>');
                    }
                    form.render();
                }
            });


        });
</script>
</body>

</html>